<template>
	<div class="page activityView" v-if="view.name">
		<div class="back" @click="back">
			<van-icon name="arrow-left" />
		</div>
		<div class="pic">
			<img :src="view.attachmentpath" />
		</div>
		<div class="title">
			<h1>{{view.name}}</h1>
			<p>
				<span class="jfen">兑换积分：{{view.integral}}</span>
			</p>
		</div>
		<h3 class="title_h31">商品详情：</h3>
		<div class="content" v-html="view.introduce">
			{{view.introduce}}
		</div>
		<van-goods-action>
			<van-goods-action-mini-btn icon="wap-home" text="首页" to="/news" />
			<van-goods-action-big-btn text="兑换" primary @click="duihuan" />
		</van-goods-action>
		<!-- 弹出 -->
		<van-dialog v-model="show" show-cancel-button :before-close="beforeClose">
			<van-field v-model="post.address" label="收货地址" placeholder="请输入收货地址" />
			<van-field v-model="post.name" label="收件人" placeholder="请输入收件人姓名" />
      <van-field v-model="post.phone" label="收件人电话" placeholder="请输入收件人电话" />
		</van-dialog>

	</div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
		  show: false,
      view: {},
      post:{
        goodsid:null,
        address:null,
        name:null,
        phone:null,
      }
    };
  },
  mounted: function() {
    this.onLoad();
  },
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    onLoad() {
      Toast.loading({ message: "加载中...", duration: 0 });
      this.$http
        .get(this.httpUrl + "/goods/details", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(response => {
          if (response.data.status == undefined) {
            Toast.clear();
            this.view = response.data.goods;
            var goodsid=this.$route.params.id
            this.post = response.data.user;
            this.post.goodsid=goodsid
          } else {
            window.location.href = this.httpUrl;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        if(this.post.phone!= ""&&this.post.name!= ""&&this.post.address!= "") {
					const toast1 = Toast.loading({mask: true,message: '提交中...'});
					this.$http.post(this.httpUrl + "/Consume/Create",this.post,{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((response) => {
						if(response.data.status!="timeout"){
						toast1.clear();
						if(response.data.status == "y") {
              done();
              Toast.success('兑换成功');
						}else{
              done();
							Toast(response.data.info);
						}
						}else{window.location.href=this.httpUrl}
					}).catch(function(error) {
						console.log(error);
					})
				} else {
          done();
					Toast('收件人电话，收件人，收件地址，不能为空');
				}
      } else {
        done();
      }
    },
    duihuan(){
      this.show=true
    }
  }
};
</script>

<style>
.activityView .b {
  font-size: 20px;
  font-weight: bold;
  color: #f60;
}
.activityView .tableBox {
  background: #fff;
  padding: 20px;
}
.activityView .tableBox table {
  background: #f4f4f4;
  width: 100%;
  border-collapse: collapse;
}
.activityView .tableBox table td {
  border: solid 1px #eee;
  line-height: 25px;
  font-size: 12px;
  color: #666;
  padding: 5px 10px;
}
.activityView .tableBox table th {
  border: solid 1px #eee;
  font-size: 14px;
  color: #333;
  width: 100px;
}
.activityView .back {
  position: fixed;
  left: 20px;
  top: 20px;
  width: 2rem;
  height: 2rem;
  background: rgba(232, 232, 232, 0.7);
  border-radius: 1rem;
}
.activityView .back i {
  margin: 0.5rem;
}
.activityView .pic {
  overflow: hidden;
}
.activityView .pic img {
  width: 100%;
  min-height: 150px;
}
.activityView .title {
  padding: 10px;
}
.activityView .title h1 {
  font-size: 1.25rem;
  line-height: 1.7rem;
  font-family: PingFangSC-Semibold;
  font-weight: 400;
  color: #333;
}
.activityView .title p {
  color: #999;
  margin-top: 5px;
}
.activityView .title p span {
  margin-right: 20px;
  font-size: 12px;
}
.activityView .content {
  width: 100%;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
  color: #666;
  line-height: 30px;
  background: #fff;
  margin-bottom: 49px;
}
.activityView .content img {
  width: 90%;
  margin: 10px auto;
  text-align: center;
}
.activityView .content p {
  padding: 10px 0;
}
.activityView .content .image-wrap {
  text-align: center;
}
.activityView .title_h31 {
  font-size: 16px;
  line-height: 30px;
  background: #fff;
  border-left: solid 3px #ee383d;
  padding: 0 20px;
}
.activityView .jfen {
  font-size: 16px !important;
  color: #ee383d;
  display: block;
}
</style>